<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media {
	body {color:#fff;background:Gray}
	a:link {color:#9cf}
	a:hover, a:visited:hover {color:#cef}
	a:visited {color:#c9f}
	pre.sourceCode {background-color:#111827;border: 1px solid #374151;}
	
	.light {color:black;background:white;width:100%}
	.dark {background:black;width:100%}
	.colorRow {display:flex;width:100%}
	.colorCard {height:100px;width:100%}


}
</style>
<div style="display:flex;width:100%;justify-content:space-around">
	<div class=light>
		<h1>Light</h1>
		<div class=colorRow>
			<div class=colorCard style="background:#1f78d1;color:white">
				Primary: Blue500  #1f78d1
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#435b77;color:white">
				Primary Variant: Night500 #435b77
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#95DE2D ">
				Secondary: Lime300 #95DE2D 
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#EBEFF2">
				Background: #EBEFF2 
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#EBEFF2">
				Surface: #EBEFF2
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#b00020;color:white">
				Error: #b00020
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#ffffff">
				OnPrimary: #ffffff
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#000000;color:white">
				OnSecondary: #000000
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#000000;color:white">
				OnBackground: #000000
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#000000;color:white">
				OnSurface: #000000
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#ffffff;color:black">
				OnError: #ffffff
			</div>
		</div>
		<h1>Alt</h1>
		<div class=colorRow>
			<div class=colorCard style="background:#2E3D4F;color:white">
				Night700 #2E3D4F
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#134a81;color:white">
				Blue800: #134a81
			</div>
		</div>
	</div>
	<div class=dark>
		<h1>Dark</h1>
		<div class=colorRow>
			<div class=colorCard style="background:#1f78d1;color:white">
				Primary: Blue500  #1f78d1
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#435b77;color:white">
				Primary Variant: Night500 #435b77
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#95DE2D;color:black">
				Secondary: Lime300 #95DE2D 
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#121212">
				Background: #121212
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#121212">
				Surface: #121212
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#b00020">
				Error: #b00020
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#ffffff;color:black">
				OnPrimary: #ffffff
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#000000">
				OnSecondary: #000000
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#ffffff;color:black">
				OnBackground: #ffffff
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#ffffff;color:black">
				OnSurface: #ffffff
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#ffffff;color:black">
				OnError: #ffffff
			</div>
		</div>
		<h1>Alt</h1>
		<div class=colorRow>
			<div class=colorCard style="background:#2E3D4F;color:white">
				Night700: #2E3D4F
			</div>
		</div>
		<div class=colorRow>
			<div class=colorCard style="background:#134a81;color:white">
				Blue800: #134a81
			</div>
		</div>
	</div>
</div>
